@deep: ~">>>";
@mainColor:#1990FF;
@toolbarBottomHeight:65px;
h1,h2,h3,h4,h5,p,ul,span{
  margin: 0;
  padding: 0;
  word-break: break-all;
}
/deep/ .list ul{
  margin: 0;
  padding: 0;
}
.common-page{
  /deep/.page-content{
    // padding-bottom: 65px;
  }
  .common-page-content{
    // height: calc(100vh - 44px);
    .toolbar.toolbar-bottom{
      position: fixed;
      bottom: 0;
      left: 0;
    }
  }
  @{deep}.van-badge--fixed{
    right: -8px;
  }
  @{deep}.van-tabs{
    .van-tabs__line{
      width: 20px;
      background-color: @mainColor;
    }
    .van-tab__text{
      font-size: 14px;
      color: #8995AC;
    }
    .van-tab--active {
      .van-tab__text{
        color: #333333;
        font-weight: 600;
      }
    }
    .van-tabs__wrap{
      position: fixed;
      width: 100%;
      z-index: 101;
    }
    .van-tabs__content{
      padding-top: 44px;
    }
  }
  @{deep}.list ul{
    background: transparent!important;
    &::before,&::after{
      display: none;
    }
  }
  .search-list{
    padding: 15px;
    margin: 0;
  }
  &.page-tab{
    ul{
      margin: 0!important;
      padding: 0!important;
    }
    .base-info{
      margin-bottom: 10px;
      .title,.bottom-list li{
        display: flex;
        font-size: 13px;
        .label{
          color: #8995AC;
          margin-right: 12px;
          flex-shrink: 0;
        }
        .value{
          color: #61677A;
          word-break: break-all;
        }
      }
      .bottom-list {
        li:nth-child(1){
          margin-bottom: 8px;
        }
      }
      
    }
    .p15{
      padding: 15px;
      
    }
    
    .qzjx-card{
      margin-bottom: 10px;
      .title{
        margin-bottom: 15px;
        color: #242424!important;
        font-weight: 600;
        font-size: 14px;
        .label,.value{
          font-size: inherit;
          color: inherit!important;
          font-weight: inherit;
        }
      }
      .sub-title{
        font-size: 14px;
        color: #8995AC;
        margin-bottom: 10px;
      }
      &.install{
        .bottom-list li{
          display: flex;
          justify-content: space-between;
          font-size: 13px;
          margin-top: 15px;
          &:first-child{
            margin-top: 12px;
          }
          .label{
            color: #737D8A;
            flex-shrink: 0;
          }
          .value{
            color: #333;
          }
        }
      }
      
    }
    .img-info-list{
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      &:last-child{
        margin-bottom: 0;
      }
      img{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin-right: 10px;
      }
      .info-box{
        h3{
          font-size: 14px;
        }
        div{
          margin: 2px 0;
        }
        p{
          font-size: 12px;
          color: #8995AC;
        }
      }
    }
  }
  &.has-bottom-btns{
    /deep/.page-content{
      padding-bottom: @toolbarBottomHeight;
    }
    /deep/ .toolbar-bottom{
      // height: @toolbarBottomHeight;
      .toolbar-inner{
        padding: 10px 0;
        .submit-btn{
          border-radius: 100px;
          // height: 100%;
          // display: flex;
          // align-items: center;
          // justify-content: center;
          font-size: 18px;
          &.plain-btn{
            background: #fff;
            color: #4b87ff;
            border: 1px solid;
          }
          &.del-btn{
            background: #fff;
            color: #F15A5A;
            border: 1px solid #F15A5A;
          }
        }
        .van-row{
          width: 100%;
          height: 100%;
          display: flex;
          .van-col{
            height: 100%;
          }
        }
      }
    }
  }
  @{deep}.van-field__body{
    textarea{
      font-size: 14px;
      padding-top: 0;
    }
    input{
      font-size: 14px;
      padding-top: 0;
    }
  }
}
.content-box{
  margin-bottom: 15px;
  padding: 15px;
  background: linear-gradient(160deg, #EFF6FF 0% ,#FFFFFF 30%, #FFFFFF 100%);
  display: flex;
  border-radius: 8px;
  box-shadow: 0 3px 8px 0 rgba(165, 201, 255, 0.10);
  position: relative;
//   &:last-child{
//     margin-bottom: 0;
//   }
  .left-box{
    width: 46px;
    height: 46px;
    margin-right: 12px;
    flex-shrink: 0;
  }
  .right-box{
    word-break: break-all;
    flex: 1;
    .title-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      section{
        display: flex;
        align-items: center;
      }
      img{
        width: 18px;
        flex-shrink: 0;
      }
      h3{
        color: #242424;
        font-size: 16px;
        flex: 1;
      }
      .status{
        font-size: 13px;
        color: #61677A;
      }
      .status-yellow{
        color: #FF9F24;
      }
    }
    .cancel-tag{
      position: absolute;
      top: 0;
      right: 0;
      background: #FD5050;
      color: #fff;
      font-size: 12px;
      padding: 2px 6px;
      border-bottom-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    span{
        flex-shrink: 0;
        &.tag.tag-fill{
          background: rgba(115, 125, 138, 0.1);
          color: #61677A;
          border: none;
        }
        &.tag.tag-yellow{
            background: #fef7ee;
            color: #FF9534;
            border: none;
        }
      }
    p{
      color: #8995AC;
      font-size: 13px;
      margin-top: 10px;
      span{
        color: @mainColor;
      }
    }
    .btns{
      display: inline-flex;
      align-items: center;
      border: 1px solid @mainColor;
      color: @mainColor;
      padding: 5px 10px;
      margin-top: 10px;
      border-radius: 4px;
      .van-icon{
        font-size: 18px;
        margin-right: 5px;
      }
    }
  }
}
.tag.tag-fill{
  background: rgba(115, 125, 138, 0.1);
  color: #61677A;
  border: none;
  padding: 2px 5px;
}
.tips-blue{
  font-size: 12px;
  color: @mainColor;
  padding: 14px 16px;
  background: #ecf5ff;
  display: flex;
  align-items: flex-start;
  @{deep}.van-icon{
      color: @mainColor;
      margin-top: 3px;
  }
  span{
    margin: 0 8px;
  }
  margin-bottom: 10px;
}
.tag-yellow-fill {
  background: rgba(255, 159, 36, 0.14);
  color: #FF9F24;
}
.tag-blue-fill {
  background: #EFF6FF;
  color: #3385FF;
}

.tag-red-fill {
  background: #FFEFEF;
  color: #F15A5A;
}
.tag-gray-fill{
  background: #F4F6F9;
  color: #8995AC;
}
.qzjx-card{
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 0 8px 0 rgba(165, 201, 255, 0.10);
  background: #fff;
}
.qzjx-accordion{
  border-radius: 8px;
  box-shadow: 0 0 8px 0 rgba(165, 201, 255, 0.10);
  background: #fff;
  margin-bottom: 10px!important;
  /deep/ .title-solid{
    display: none;
  }
  /deep/ .item-link{
    .item-content{
      padding-left: 15px!important;
      span.text{
        font-size: 15px!important;
      }
      .item-inner{
        padding-top: 15px!important;
        padding-bottom: 15px!important;
      }
    }
    .i{
      display: none;
    }
  }
  /deep/ .accordion-item-content{
    position: relative;
    &::before{
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 0.5px;
      background: #E9EDF7;
    }
    .sub-title{
      font-size: 14px;
      color: #8995AC;
      margin-bottom: 10px;
    }
  }
}
// 弹出层
.qm-popup {
  .qm-popup-content {
      padding: 20px 16px 0 16px;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;

      .popup-title {
          flex: 0 0 auto;
          margin-bottom: 20px;
          font-size: 16px;
          font-weight: 600;
          color: #333333;
          line-height: 23px;
          text-align: center;
      }
  }

  // 弹出框关闭按钮
  /deep/.van-popup__close-icon {
      top: 20px;

      img {
          width: 15px;
      }
  }

  // 搜索框
  .van-search {
      flex: 0 0 auto;
      padding: 0;
      height: 36px;

      /deep/.van-search__content {
          background-color: #f5f7fa;
          border-radius: 18px;

          .van-field__left-icon {
              display: flex;
              align-items: center;
          }

          input {
              &::placeholder {
                  font-size: 14px;
                  color: #61677a;
                  line-height: 20px;
              }
          }
      }
  }

  // 参数
  .param-box {
      flex: 1;
      margin: 0 -16px;
      padding: 0 16px;
      overflow: auto;

      .param-list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 12px 15px;
      }

      .param-item {
          margin-top: 30px;

          .param-title {
              margin-bottom: 15px;
              font-size: 16px;
              font-weight: 600;
              color: #333333;
              line-height: 23px;
          }

          // 单选
          .param-radio {
              padding: 8px 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: #333333;
              line-height: 20px;
              height: 100%;
              background: #f5f7fa;
              border-radius: 4px;
              word-wrap: break-all;
              box-sizing: border-box;

              &.is-active {
                  color: @mainColor;
                  background: rgba(51, 133, 255, 0.08);
              }
          }

          .van-row {
              margin-bottom: 15px;

              &:last-child {
                  margin-bottom: 0;
              }
          }

          // 日期范围选择
          .date-time-picker {
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #333333;

              .join-text {
                  flex: 0 0 auto;
                  margin: 0 15px;
                  font-size: 14px;
                  line-height: 20px;
              }

              .start,
              .end {
                  flex: 1;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 40px;
                  font-size: 14px;
                  background: #f5f7fa;
                  border-radius: 4px;
                  color: #b5bcca;
              }
          }
      }
  }

  // 按钮
  .btn-box {
      flex: 0 0 auto;
      margin-top: 30px;
      padding: 15px 0;

      .van-button {
          height: 48px;
          font-size: 18px;
          color: #fff;
          background-color: @mainColor;
          border: none;

          &.reset {
              color: @mainColor;
              background-color: rgba(59, 127, 250, 0.14);
              border: 2px solid #e3e5e9;
          }
      }
  }
}
.df-layout{
  display: flex;
}
.aic{
  align-items: center;
}
.jcsb{
  justify-content: space-between;
}
.mainColor{
  color: @mainColor;
}
.qzjx_label{
  color: #909DB6;
}
.qzjx_value{
  color: #61677A;
}
.df-box{
  display: flex;
  .index{
    flex-shrink: 0;
    width: 25px;
    height: 22px;
    background: rgba(51, 133, 255, 0.1);
    color: @mainColor;
    margin-right: 15px;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
  }
  .right-content-box{
    flex: 1;
    .title{
      font-weight: 400!important;
    }
  }
}
/deep/.pic_upload_ul{
  display: flex;
  flex-wrap: wrap;
  li{
    width: 32%;
    height: 76px;
    border-radius: 5px;
    margin-right: 2%;
    >img{
      width: 100%;
      height: 100%;
    }
    &:nth-child(3n){
        margin-right: 0;
    }
    &:nth-child(n+4){
        margin-top: 10px;
    }
    &.upload-li{
      position: relative;
      background: #F5F8FF;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #8995AC;
      font-size: 14px;
      padding: 0 5px;
      img{
        position: absolute;
        right: -10px;
        top: -12px;
        width: 37px;
        height: 35px;
        z-index: 11;
      }
      span:nth-child(1){
        color: #333333;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        text-align: center;
        &.toSure{
          font-weight: 300;
          color: #909DB6;
        }
      }
    }
  }
}
.detail{
  .tag.tag-fill{
    max-width: 50%;
  }
  @{deep}.page-content {
    padding-top: 43px;
    background: linear-gradient(180deg, @mainColor 80px, #fff 140px, #F1F3F7 100%);
    padding: 48px 15px 15px 15px;
  }
  .navbar {
    box-shadow: none;
  
    @{deep}.navbar-bg {
      &::before,
      &::after {
        display: none;
      }
    }
  }
  @{deep}.van-steps{
    padding: 0;
    .van-step{
      color: #61677A;
      &:last-child .van-step__line{
          width: 0!important;
      }
    }
    .van-step--finish .van-step__circle, .van-step--finish .van-step__line{
      background-color: @mainColor;
    }
    .van-step--vertical::after{
      border: none;
    }
    .van-step--finish,.van-step__title--active{
      color: #333;
    }
    .step-box{
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 600;
      align-items: center;
      span{
        &:nth-child(1){
          flex-shrink: 0;
          &.red{
            color: #FD5050;
          }
        }
        &:nth-child(2){
          color: #61677A;
          font-size: 13px;
          font-weight: 400;
          flex: 1;
          text-align: right;
          padding-left: 5px;
          .van-icon{
            // margin-left: 5px;
            color: #b6bccb;
          }
        }
      }
    }
    .van-step__line{
      width: 2px;
      background-color: #BCC5D6;
      top: 51%;
    }
    .van-step--vertical {
      padding: 20px 3px 20px 30px;
      position: relative;
      .van-step__circle-container,.van-step__line{
        left: 16px;
        z-index: 1;
      }
      .van-step__circle-container{
        z-index: 2;
        top: 50%;
      }
      .van-step__title{
        z-index: 3;
        position: relative;
      }
      &::before{
        content:'';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background: linear-gradient(90deg, rgba(238, 247, 255, 0.5) 0%, rgba(244, 251, 255, 0.5) 100%);
        border: 1px solid rgba(209, 229, 254, 0.5);
        z-index: 0;
        height: 70%;
        width: 100%;
        box-sizing: border-box;
        border-radius: 4px;
      }
      &.van-step--finish,&.van-step--process{
        &::before{
          background: linear-gradient(90deg, rgba(238, 247, 255, 1) 0%, rgba(247, 252, 255, 1) 100%);
          border: 1px solid rgba(209, 229, 254, 1);
        }
      }
      
    }
    .is-process{
      border: 4px solid @mainColor;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background: #fff;
    }
    .is-cancel{
      width: 16px;
      height: 16px;
      background: #fff;
      border: 1px solid #FD5050;
      text-align: center;
      border-radius: 16px;
      line-height: 18px;
      color: #FD5050;
      font-size: 13px;
      &::before{
        content:'';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 10px;
        height: 10px;
        background: url('../img/qzjx/cancel.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .is-success{
      width: 16px;
      height: 16px;
      background: #fff;
      border: 1px solid @mainColor;
      text-align: center;
      border-radius: 16px;
      line-height: 18px;
      color: @mainColor;
      font-size: 13px;
    }
    .is-waiting{
      background: #F7FCFF;
      width: 8px;
      height: 8px;
      border: 2px solid #BCC5D6;
      border-radius: 10px;
    }
  }
  @{deep} .van-collapse{
    .van-collapse-item__title{
        padding: 10px 16px!important;
        height: auto!important;
    }
    .collapseTitle{
        position: relative;
        color: #333333;
        font-size: 14px;
        font-weight: 600;
        padding-left: 10px;
        &::before{
            content: '';
            position: absolute;
            left: 0;
            width: 3px;
            height: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: #3385FF;
        }
    }
}
}